<template>
  <div class="app-container">
    <hd-table-page
      ref="hdTable"
      :columns="columns"
      :defaultData="defaultData"
      modulePath="attendance/group"
      style="height: calc(100% - 120px)"
      :disabledBtns="['export']">
      <!-- <template #query-shiftIdList="{ data, field }">
        <el-select ref="select-shiftIdList" v-model="data[field.prop]" style="width: 100%" clearable>
          <el-option v-for="item in shiftOptions" :key="item.id" :label="item.shiftName" :value="item.id"></el-option>
        </el-select>
      </template> -->
      <template #query-groupType="{ data, field }">
        <el-select v-model="data[field.prop]" clearable placeholder="请选择考勤类型" style="width: 100%">
          <el-option
            v-for="dict in $store.state.dicts.Attendance_type"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"></el-option>
        </el-select>
      </template>
      <template #form-groupType="{ data, field }">
        <el-select
          v-model="data[field.prop]"
          clearable
          placeholder="请选择考勤类型"
          style="width: 100%"
          @change="(params) => handleChange(data, params)">
          <el-option
            v-for="dict in $store.state.dicts.Attendance_type"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"></el-option>
        </el-select>
      </template>
      <template #form-shiftIdList="{ data, field }">
        <el-select
          v-if="shiftOptions.length > 0"
          ref="select-shiftIdList"
          v-model="data[field.prop]"
          style="width: 100%"
          clearable
          multiple
          :multiple-limit="data.groupType == '2' ? 0 : 1">
          <el-option v-for="item in shiftOptions" :key="item.id" :label="item.shiftName" :value="item.id"></el-option>
        </el-select>
      </template>
      <template #form-workDay="{ data, field }">
        <el-select v-model="data[field.prop]" style="width: 100%" multiple clearable :disabled="data.groupType == '2' || data.groupType == null">
          <el-option v-for="item in $store.state.dicts.work_day" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
        </el-select>
      </template>
      <template #form-employees="{ data, field }">
        <HdUserSelect v-model="data[field.prop]" style="width: 100%" multiple></HdUserSelect>
      </template>
    </hd-table-page>
  </div>
</template>

<script>
//考勤组配置
import BaseService from '@/api/base/base'
const baseService = new BaseService('attendance/group')
//获取考勤班次
const shiftService = new BaseService('attendance/shift')
export default {
  name: 'GroupsAttendance',
  data() {
    return {
      // 导出遮罩层
      columns: [
        { type: 'index', label: '#', align: 'center' },
        { prop: 'groupName', label: '考勤组', required: true },
        {
          prop: 'groupType',
          label: '考勤类型',
          width: '120px',
          required: true,
          formatter: (row, col, val) => {
            return this.getDictLabel(val, this.$store.state.dicts.Attendance_type)
          },
        },
        { prop: 'shiftIdList', label: '考勤班次', required: true, isColumn: false, isSearch: false },
        { prop: 'groupDesc', label: '考勤班次', width: '150px', isField: false, isSearch: false },
        { prop: 'workDay', label: '工作日设置', minWidth: '150px', isSearch: false, isColumn: false },
        { prop: 'count', label: '考勤组人数', width: '100px', isSearch: false, isField: false },
        {
          prop: 'employees',
          label: '考勤人员',
          minWidth: '150px',
          isSearch: false,
          formatter: (row, col, val) => val?.join(','),
        },
      ],
      shiftOptions: [],
      defaultData: {
        form: {
          workDay: [],
        },
      },
    }
  },
  created() {
    this.$store.dispatch('GetDict', 'Attendance_type')
    this.$store.dispatch('GetDict', 'work_day')
    shiftService.getList().then((res) => {
      this.shiftOptions = res.rows
    })
  },
  methods: {
    handleChange(data, val) {
      this.$refs['hdTable'].setForm({ shiftIdList: [] })
      this.$refs['hdTable'].setForm({ workDay: [] })
      this.$refs['select-shiftIdList'].$refs.reference.$refs.input.value = null
    },
  },
}
</script>

<style lang="scss" scoped></style>
